/**
 * useMemo
 *
 * 作用：计算属性、static getDerivedStateFromProps()
 *
 * 语法：const value = useMemo(callback, deps)
 *      value 是 callback 回调函数返回的值
 */

import React, { useState, useMemo } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [count, setCount] = useState(0);
  const [first, setFirst] = useState("张");
  const [last, setLast] = useState("三");

  const fullName = useMemo(() => {
    console.log("useMemo");
    return first + last;
  }, [first, last]);

  return (
    <div>
      <h1>App</h1>
      <p>count: {count}</p>
      <p>fist: {first}</p>
      <p>last: {last}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        count++
      </button>
      <button onClick={() => setFirst((prevFirst) => prevFirst + "1")}>
        first
      </button>
      <button onClick={() => setLast((prevLast) => prevLast + "1")}>
        last - 四
      </button>
      <p>fullName: {fullName}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
